<template>
  <div class="chat-item" :class="['type-' + item.type]">
    <div ref="refBubble" class="bubble">
      <span style="white-space: pre-line; word-break: break-all;">
        {{ item.content }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  item: TypeConversationItem
}>()
</script>

<style lang="less" scoped>
.chat-item {
  padding: 10px 13px;
  font-size: 14px;
  display: flex;
  justify-content: flex-end;

  .bubble {
    padding: 16px;
    border-radius: 12.5px 12.5px 2.5px 12.5px;
    color: #fff;
    max-width: 250px;
    line-height: 1.2;
    position: relative;
    background: linear-gradient(87.43deg, #0aa3f9 0%, #277aea 100%);
  }
}
</style>
